<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div class="title">{{ this.mDate }}天内销售额</div>
          <div class="chart" ref="salesVolumeChart"></div> </el-card
      ></el-col>
      <el-col :span="12">
        <el-card>
          <div class="title">{{ this.mDate }}天内订单下单量</div>
          <div class="chart" id="orderChart" ref="orderChart"></div> </el-card
      ></el-col>
    </el-row>
    <el-card class="m-t-10">
      <div class="title">{{ this.mDate }}天内新用户注册量</div>
      <div class="chart" ref="userChart"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: 0,
      month: 0,
      date: 0,
      ref: null,
      salesVolumeChart: null,

      orderChart: null,
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [312313, 43423, 5446, 6767, 131, 34543, 7576],
            type: 'line',
            itemStyle: { normal: { label: { show: true } } }
          }
        ]
      },
      mDate: 7
    }
  },
  created() {
    // 销售额
    this.getSalesVolume()
    // 订单数量
    this.getOrder()
    // 新注册用户
    this.getUser()
  },
  methods: {
    /**
     *
     * @param {*} chart 图像对象
     * @param {*} options 图像设置对象
     * @param {*} refChart
     * @param {*} xData x轴显示的数据
     * @param {*} data 数据
     */
    initCharts(chart, options, refChart, xData, data) {
      options.xAxis.data = xData
      options.series[0].data = data
      chart = this.$echarts.init(refChart)
      chart.setOption(options)
    },
    getMDateList() {
      const d = new Date().getTime()
      const oneDay = 3600 * 24 * 1000
      const tempList = []

      // 获取这几天的所有天号
      for (let i = this.mDate - 1; i > -1; i--) {
        const s = d - oneDay * i
        const dd = new Date(s)
        tempList.push(dd.getDate())
      }
      return tempList
    },
    formatData(temp, mDateList) {
      const sData = [...mDateList]
      for (const key in temp) {
        if (Object.prototype.hasOwnProperty.call(temp, key)) {
          // key 是日期，value是销售额
          const value = temp[key]
          const index = sData.indexOf(parseInt(key))
          if (index !== -1) {
            sData[index] = value
          }
        }
      }

      return sData
    },
    // 销售e
    async getSalesVolume() {
      const { data: res } = await this.$http.get(
        '/getOrderRealPriceTotalBy7Days'
      )
      if (res.status !== 200) {
        this.$message.error('获取销售额失败')
        return
      }

      const temp = res.data
      const mDateList = this.getMDateList()
      // 因为日期有可能31号到1号，所以必须按mDate列表顺序重新制作销售额列表
      const sData = this.formatData(temp, mDateList)
      // console.log(sData)

      // // 初始化图一
      const ter = setTimeout(() => {
        this.initCharts(
          this.salesVolumeChart,
          this.options,
          this.$refs.salesVolumeChart,
          mDateList,
          sData
        )
        clearTimeout(ter)
      }, 500)
    },
    async getOrder() {
      const { data: res } = await this.$http.get('/getOrderCreateCountBy7Days')
      if (res.status !== 200) {
        this.$message.error('获取下单量失败')
        return
      }

      const temp = res.data
      const mDateList = this.getMDateList()
      const sData = this.formatData(temp, mDateList)
      // 初始化图
      const ter = setTimeout(() => {
        this.initCharts(
          this.orderChart,
          this.options,
          this.$refs.orderChart,
          mDateList,
          sData
        )
        clearTimeout(ter)
      }, 500)
    },
    async getUser() {
      const { data: res } = await this.$http.get('getUserCreateCountBy7Days')

      if (res.status !== 200) {
        this.$message.error('获取用户注册量失败')
        return
      }

      const temp = res.data
      const mDateList = this.getMDateList()

      const sData = this.formatData(temp, mDateList)
      // 初始化图
      const ter = setTimeout(() => {
        this.initCharts(
          this.userChart,
          this.options,
          this.$refs.userChart,
          mDateList,
          sData
        )
        clearTimeout(ter)
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 300px;
  // background-color: aqua;
}

.m-t-10 {
  margin-top: 10px;
}
</style>
